<template>
  <el-card>
    <el-table :data="skuList" border style="margin-bottom: 10px;">
      <el-table-column type="index" label="序号" align="center" width="80"></el-table-column>
      <el-table-column prop="skuName" label="名称"></el-table-column>
      <el-table-column prop="skuDesc" label="描述"></el-table-column>
      <el-table-column label="默认图片">
        <template #="{ row, index }">
          <img :src="row.skuDefaultImg" style="width: 100px;height: 60px;">
        </template>
      </el-table-column>
      <el-table-column prop="weight" label="重量(KG)"></el-table-column>
      <el-table-column prop="price" label="价格(元)"></el-table-column>
      <el-table-column label="操作" width="250" align="center">
        <template #="{ row, index }">
          <el-button v-if="row.isSale" type="success" size="small" :icon="Top" title="上架" @click="goodsHandler(row, true)"></el-button>
          <el-button v-else type="info" size="small" :icon="Bottom" title="下架" @click="goodsHandler(row, false)"></el-button>

          <el-button type="primary" size="small" :icon="Edit" title="编辑SKU" @click="editSku"></el-button>
          <el-button type="info" size="small" :icon="InfoFilled" title="查看详情" @click="showSkuDetail(row)"></el-button>
          


          <el-popconfirm
            width="220"
            confirm-button-text="确定"
            cancel-button-text="取消"
            :icon="InfoFilled"
            icon-color="#626AEF"
            @confirm="deleteSku(row.id)"
            :title="`你确定删除${row.skuName}?`"
          >
            <template #reference>
              <el-button type="danger" size="small" :icon="Delete" title="删除SKU"></el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      v-model:current-page="page"
      v-model:page-size="limit"
      :total="total"
      layout="prev, pager, next, jumper"
      @current-change="handleCurrentChange"
    />


    <el-drawer
      v-model="isDrawer"
      size="50%"
      :with-header="false"
    >
      <el-row>
        <el-col :span="6">名称</el-col>
        <el-col :span="18">{{ skuInfo?.skuName }}</el-col>
      </el-row>
      <el-row>
        <el-col :span="6">描述</el-col>
        <el-col :span="18">{{ skuInfo?.skuDesc }}</el-col>
      </el-row>
      <el-row>
        <el-col :span="6">价格</el-col>
        <el-col :span="18">{{ skuInfo?.price }}</el-col>
      </el-row>
      <el-row>
        <el-col :span="6">平台属性</el-col>
        <el-col :span="18">
          <el-tag
            type="success"
            size="small"
            v-for="attr in skuInfo?.skuAttrValueList"
            :key="attr.id"
            style="margin-right: 5px"
          >{{ attr.attrName }}-{{ attr.valueName }}</el-tag>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6">销售属性</el-col>
        <el-col :span="18">
          <el-tag
            type="success"
            size="small"
            v-for="attr in skuInfo?.skuSaleAttrValueList"
            :key="attr.id"
            style="margin-right: 5px"
          >{{ attr.saleAttrName }}-{{ attr.saleAttrValueName }}</el-tag>
        </el-col>
      </el-row>      
      <el-row>
        <el-col :span="6">商品图片</el-col>
        <el-col :span="18">
          <el-carousel class="swiper" trigger="click" height="400px" style="width: 400px">
            <el-carousel-item v-for="item in skuInfo?.skuImageList" :key="item.id">
              <img :src="item.imgUrl" style="width: 400px;height: 400px;">
            </el-carousel-item>
          </el-carousel>
        </el-col>
      </el-row>




    </el-drawer>
  </el-card>
</template>

<script setup lang="ts">
// 页面书写套路:
// 1. 静态搭建
// 2. 数据初始化展示
//  2.1 准备api,书写TS类型
//  2.2 页面初始化(moun)的时候调用api,存储数据,展示数据
// 3. 交互
//  3.1 上架/下架
//  3.2 编辑(不做)
//  3.3 查看详情
//    用一下没有用过的组件(抽屉,栅格,走马灯)
//  3.4 删除
//    删除-当点击删除按钮,需要调用接口的时候,一定要让用户做双重确认
import { ref, onMounted } from 'vue';
import skuApi, { type SkuListModel, type SkuModel } from '@/api/product/sku'
import { ElMessage } from 'element-plus';
import { Top, Bottom, Edit, InfoFilled, Delete } from "@element-plus/icons-vue";



// 删除商品
const deleteSku = async (skuId: number) => {
  try {
    await skuApi.delete(skuId);
    ElMessage.success('删除成功')
    getPage(); // 重新获取页面数据
  } catch (error) {
    ElMessage.error("删除失败,请重试")
  }
}



// 显示商品详情
const isDrawer = ref(false)
const skuInfo = ref<SkuModel>()
const showSkuDetail = async (row: SkuModel) => {
  try {
    let result = await skuApi.getSkuInfo(row.id as number);
    skuInfo.value = result;
    // 展示侧边栏弹框
    isDrawer.value = true
  } catch (error) {
    ElMessage.error(`获取[${ row.skuName }]失败,请重试`)
  }
}



// 编辑
const editSku = () => {
  ElMessage.success('正在开发中...')
}


// 上架/下架
const goodsHandler = async (row: SkuModel, flag: boolean) => {
  try {
    if (flag) {
      await skuApi.cancelSale(row.id as number); // 下架
    } else {
      await skuApi.onSale(row.id as number) // 上架
    }
    ElMessage.success(`${ flag ? '下架' : '上架' }成功`)
    // 重新获取当前页面的数据
    getPage();
  } catch (error) {
    ElMessage.error(`${ flag ? '下架' : '上架' }失败`)
  }
}



const skuList = ref<SkuListModel>([])
// 获取页面数据
const getPage = async () => {
  try {
    let result = await skuApi.getPage(page.value, limit.value);
    skuList.value = result.records;
    total.value = result.total;
  } catch (error) {
    ElMessage.error('获取SKU列表失败,请重试')
  }
}

// 挂载 - 初始化数据
onMounted(() => {
  getPage();
})



const page = ref(1) // 当前页
const limit = ref(10) // 每一页条数
const total = ref(0) // 总条数
const handleCurrentChange = (val: number) => { // 翻页的回调
  page.value = val;
  // 重新发请求
  getPage();
}


</script>

<style lang="scss" scoped>
// 需求: 修改轮播分页的样式,修改城小圆点样式
// 涉及到两个知识点: 1. scoped 2.深度作用选择器
// 1. scoped 作用
//  将样式限制在当前组件和子组件的根标签上
//  为什么会出现这样的效果?(忘了 - 按步骤推,看效果)
//    * 当style标签不加scoped的时候,设置的样式是全局的,会应用到整个页面
//    * 当style标签加scoped的时候,样式会应用于当前组件和子组件的根标签上
// 为什么会这样?
// 加scoped的时候,vue会给当前标签和子组件的根标签加一个 data-v-f52cbf12
//  data-v是固定写法 f52cbf12 是一个哈希值,目的是保证整个页面唯一,标注当前组件和子组件的根标签
//  同时写的css会变成一个属性选择器
//  h2[data-v-f52cbf12] {
//    color: red
//  }
// 优点:scoped会将样式限制在当前组件内,和子组件的根标签,不会影响到其他的地方
// 2. 深度作用选择器
// css、less、scss的深度作用选择器写法不一样
// css的写法
//    .a >>> .b {}
//    解释: 类名a元素下,不管几层选到一个后代.b的元素
//         深度作用选择器和后代选择器不一样
//    >>> .b {}
//    解释: 页面中,直接找.b元素设置样式
//    >>> 加了之后变成的样子
//      [data-v-891a24d4] .el-carousel__button {}
// less的写法
//    .a /deep/ .b {}
//    解释: 类名a元素下,不管几层选到一个后代.b的元素
//         深度作用选择器和后代选择器不一样
//    /deep/ .b {}
//    解释: 页面中,直接找.b元素设置样式
// scss的写法(注意:此写法同样对less其效果)
//    .a ::v-deep(.b) {}
//    解释: 类名a元素下,不管几层选到一个后代.b的元素
//         深度作用选择器和后代选择器不一样
//    ::v-deep(.b) {}
//    解释: 页面中,直接找.b元素设置样式
// ---------
// 强调 v-deep vue2的写法和vue3的写法不一样
// vue3
//    ::v-deep(.b) {}
// vue2
//    ::v-deep .b {}
// -------
// 深度作用选择器优先级一样,但是权重会影响优先级,权重越大,优先级越高
.swiper ::v-deep(.el-carousel__button) {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: greenyellow;
}

.el-col {
  line-height: 30px;
  padding: 0 10px;
}
.el-col-6 {
  font-size: 24px;
  font-weight: bold;
  text-align: right;
}

// .el-carousel__button {
//   width: 20px;
//   height: 20px;
//   border-radius: 50%;
//   background-color: skyblue;
// }
</style>

<style scoped>
/*
css深度作用选择器
*/
/* >>> .el-carousel__button {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: skyblue;
} */
</style>

<style>
/*
这样好使,因为此时样式是全局的
但是,这样存在一个问题,样式会影响其他的页面
如果其他页面也有轮播图的时候,小圆点也会改变
*/
/* .el-carousel__button {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: skyblue;
} */
</style>